<template>
  <!-- 关于我们总入口 -->
  <div id="corporate">
    <!-- <div class="logoBoxtop" @click="gotoindex">
      <img src="@/assets/shi/logo-2.png" class="logo" />
    </div> -->
    <HeaderTop></HeaderTop>
    <img src="./NumImg/banner.png" class="banner" />
    <div class="rightBox">
      <div class="btn_group">
        <div class="btnbox">
          <div :class="{ active: input_btn == '公司介绍' }" @click="input_btn = '公司介绍'">公司介绍</div>
          <div :class="{ active: input_btn == '联系我们' }" @click="input_btn = '联系我们'">联系我们</div>
          <div :class="{ active: input_btn == '服务条款' }" @click="input_btn = '服务条款'">服务条款</div>
          <div :class="{ active: input_btn == '隐私条款' }" @click="input_btn = '隐私条款'">隐私条款</div>
        </div>
      </div>
      <div class="rightBox-content">
        <about v-if="input_btn == '公司介绍'" />
        <contactUS v-if="input_btn == '联系我们'" />
        <!-- <joinUS v-if="input_btn == '隐私条款'" /> -->
        <serviceClause v-if="input_btn == '服务条款'" />
        <privacyClause v-if="input_btn == '隐私条款'" />
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTop from './header.vue';
import about from './about.vue';
import contactUS from './contact.vue'; // 联系我们
import joinUS from './join.vue';
import serviceClause from './serviceClause.vue'; // 服务条款
import privacyClause from './privacyClause.vue'; // 隐私条款
export default {
  props: {},
  components: {
    HeaderTop,
    about,
    contactUS,
    joinUS,
    serviceClause,
    privacyClause
  },
  data() {
    return {
      input_btn: this.$route.query.tabName
    };
  },
  computed: {},
  watch: {
    input_btn(newvalue) {
      if (newvalue == '公司介绍') {
        document.title = '公司介绍-掌上精选';
      } else if (newvalue == '联系我们') {
        document.title = '联系我们-掌上精选';
      } else if (newvalue == '服务条款') {
        document.title = '服务条款-掌上精选';
      } else {
        document.title = '隐私条款-掌上精选';
      }
    },
    '$route': function (to, from) {
      this.input_btn = to.query.tabName;
    }  
  },
  created() {
    if (this.$route.params.tabName) this.input_btn = this.$route.params.tabName;
  },
  mounted() {},

  methods: {
    showtabs() {
      if (this.$route.query.tabName != null) {
        this.input_btn = this.$route.query.tabName;
      }
    },
    gotoindex() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped lang="less">
#corporate {
  padding-top: 62px;
  .logoBoxtop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 135px;
    cursor: pointer;
    .logo {
      display: block;
      width: 88px;
      height: 32px;
      margin-right: 12px;
    }
  }
  .banner {
    width: 100%;
    min-height: 300px;
    object-fit: cover;
  }
  .rightBox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 6px;
    .btn_group {
      width: 100%;
      background-color: #f5f5f5;
      .btnbox {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        .active {
          color: #fd7f2c !important;
          font-weight: 700;
          position: relative;
        }
        .active::after {
          content: '';
          position: absolute;
          left: 38.5%;
          top: 93%;
          width: 70px;
          height: 4px;
          border-radius: 2px;
          background-color: #fd7f2c;
        }
        div {
          width: 25%;
          font-size: 16px;
          color: #222;
          line-height: 62px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
  .rightBox-content {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 20px;
    margin-top: 10px;
    padding-bottom: 0;
  }
}
</style>
